<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS常用事件及其绑定</title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
				border: 5px solid aqua;
			}
		</style>
	</head>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	<body>
		<!-- 点击事件（onclick）-->
		<button type="button" onclick="btnclick1();" >点击事件按钮</button>
		<!--双击事件（ondblclick）-->
		<button type="button" ondblclick="btndblclick2();">双击事件按钮</button><br><br>
		<!-- 进入元素（onmouseenter）离开元素（onmouseleave） 在元素上面移动（onmousemove） -->
		<div id="div1" onmouseenter="into();" onmouseleave="leave();" onmousemove="move();">
		</div><br>
		<from>
			<!-- 获取焦点（onfocus） 失去焦点（onblur）值变化时触发（onchange） -->
			用户名：<input type="text" name="" id="usname" value="" onfocus="usfocus();"
			onblur="usleave();" onchange="uschange();"/><br>
			密  码：	<input type="password" name="" id="" value="" /><br>
			<button type="submit">提交</button>
		</from><br><br>
		<button type="button" id="btnHello">打印hello world</button>
		<button type="button" onclick="addListener();">添加监听器</button>
		<button type="button" onclick="removeListener();">移除监听器</button>
	</body>
	<script type="text/javascript">
		function btnclick1(){
			alert('你好 帅哥！');
			//里面可以调用其它的方法
			btndblclick2();
		}
		function btndblclick2(){
			alert('你好 美女！');
		}
		function into(){
			console.log('进来了！')
			document.getElementById('div1').style.backgroundColor = 'blue'
		}
		function leave(){
			console.log('出去了！')
			document.getElementById('div1').style.backgroundColor = 'red'
		}
		function move(){
			console.log('别这样！')
		}
		function usfocus(){
			console.log('请输入你的用户名！')
		}
		function usleave(){
			// console.log('请完成输入你的用户名！')
			var usname = document.getElementById('usname')
			if(usname.value == ''){
				alert('用户名不能为空！');
				return;
			}
			if( usname.value.length<6){
				alert('用户名不能小于6位');
				return;
			}
		}	
		function uschange(){
			console.log('值变了你变了！')
		}
			// 页面初始化完毕后执行的动作（nload）
		onload = function(){
			alert('欢迎光临 红浪漫！')
		}
		
		
		// 监听器
		//3.1 添加监听器
		// document.getElementById('div3').addEventListener('dblclick',function(){
		// 	console.log('双击了DIV3')
		// })
		function aa(){
			console.log('双击了DIV3')
		}
		//3.2 清除监听器
		
		
		/////////////////////
		function SayHello(){
			console.log('hello world')
		}
		function addListener(){
			//OK
			document.getElementById('btnHello').addEventListener('click',SayHello)
			//OK
			// document.getElementById('btnHello').addEventListener('click',function(){
			// 	console.log('hello world')
			// })
		}
		function removeListener(){
			//OK
			document.getElementById('btnHello').removeEventListener('click',SayHello)
			//NO OK
			// document.getElementById('btnHello').removeEventListener('click',function(){
			// 	console.log('hello world')
			// })
		}
	</script>
</html>
